<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
          title="添加商品信息"
          type="info"
          center
          show-icon
          :closable="false">
      </el-alert>
      <!--步骤条-->
      <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"
          label-position="top">
        <!--tab栏区域-->
        <el-tabs v-model='activeIndex' :tab-position="'left'" :before-leave="beforeLeave"
        @tab-click="tabClicked">
          <el-tab-pane label="基本信息" name="0">
            <!--商品名称-->
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price" >
              <el-input v-model="addForm.goods_price" type="number">
              </el-input>
            </el-form-item> <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="addForm.goods_weight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addForm.goods_number" type="number">

              </el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <div class="block">
                <span class="demonstration">请选择商品分类</span>
                <el-cascader
                    v-model="addForm.goods_cat"
                    :options="cateList"
                    :props="cateProps"
                    @change="handleChange">
                </el-cascader>
              </div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
              <!--复选框-->
              <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
            <el-upload
                action="upLoadURL"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                list-type="picture" :headers="headersObj">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <!--富文本编辑器组件-->
            <quill-editor
                v-model="addForm.goods_introduce"
            />
            <!--添加商品按钮-->
            <el-button type="primary" class="btn_add" @click="add">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import _ from 'lodash'
  export default {
    name: "Add",
    data(){
      return{
        activeIndex:'1',
        addForm:{
          goods_name:'000',
          goods_price:0,
          goods_weight:0,
          goods_number:0,
          goods_cat:[],
          goods_introduce:'000'
        },
        addFormRules:{
          goods_name:[{ required: true, message: '请输入商品名称', trigger: 'blur' }],
          goods_price:[{ required: true, message: '请输入商品价格', trigger: 'blur' }],
          goods_weight:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
          goods_number:[{ required: true, message: '请输入商品数量', trigger: 'blur' }],
          goods_cat:[{ required: true, message: '请输入商品规则', trigger: 'blur' }]
        },
        cateList:[],
        cateProps:{
          label:'cat_name',
          value:'cat_id',
          children:'children'
        },
        // 动态参数数据
        manyTableData:[],
        onlyTableData:[],
        // 图像上传的地址
        upLoadURL:this.$http.defaults.baseURL + 'upload',
        headersObj:{Authorization:window.sessionStorage.getItem('token')}
      }
    },
    created(){
      this.getCateList()
      console.log(this.upLoadURL);
    },
    methods:{
      async getCateList(){
        const {data:res} = await this.$http.get('categories')
        if(res.meta.status !==200){
          return this.$message.error('获取分类数据失败')
        }
        this.cateList = res.data
        // console.log(this.cateList);
      },
      // 级联选择器改变后调用的函数
      handleChange(){
        console.log(this.addForm.goods_cat);
        // 限制只能选择三级分类
        if(this.addForm.goods_cat.length !==3){
          this.addForm.goods_cat =''
        }
      },
      beforeLeave(active,oldActive){
        // 第一个参数显示的是将要激活的标签页，第二个参数显示的是之前激活的标签页
        // console.log('新的激活页', active);
        // console.log('将要的激活页', oldActive);
        if(oldActive ==='0' && this.addForm.goods_cat.length!==3){
          this.$message.error('请您选择分类')
          return false
        }
      },
      async tabClicked(){
         if(this.activeIndex === '1'){
           const {data:res} =await this.$http.get(`categories/${this.cateId}/attributes`,{
             params:{sel:'many'}
           })
           if(res.meta.status !==200){
             return this.$message.error('获取参数列表失败')
           }
           console.log(res.data);
           // 判断数组是否为空，并且转化成数组
           res.data.forEach(item =>{
             item.attr_vals = item.attr_vals.length===0 ? [] : item.attr_vals.split(',')
             this.manyTableData = res.data
           })
         }else if(this.activeIndex === '2'){
           const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'only'}})
           if(res.meta.status !==200){
             return this.$message.error('获取静态属性失败')
           }
           this.onlyTableData = res.data
         }
      },
      // 处理图像预览效果
      handlePreview(){

      },
      // 处理图片移除效果
      handleRemove(){},
      add(){
        // console.log(this.addForm);
        this.$refs.addFormRef.validate(
            valid =>{
              if(!valid){}
              return this.$message.error('请填写必要的表单项')
            }
            // 执行添加业务的逻辑
        )
        const form = _.cloneDeep('this.addForm')
        form.goods_cat = form.goods_cat.join(',')
        console.log(form);
        this.$message.success('提交成功')
      }

    },
    computed:{
      cateId(){
        if(this.addForm.goods_cat.length === 3){
          return this.addForm.goods_cat[2]
        }
        return null
      }
    }
  }
</script>

<style scoped>
  .el-steps{
    margin: 15px 0;
  }
  .el-step__title{
  font-size: 13px;
  }
  .btn_add{
    margin-top: 15px;
  }

</style>